<template>
  <div class="detail">
      <!-- <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        /> -->
      <img class="back" src="~@/assets/bak.svg" @click="onClickLeft" alt="">
      <div class="bigHead">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcheyouquan.image.mucang.cn%2Fsaturn-image%2F2017%2F06%2F15%2F07%2F3542a701d07442928671de5e01edcf67.jpeg%21detail&refer=http%3A%2F%2Fcheyouquan.image.mucang.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1626575723&t=5ac8b272d89c8fe478244e19251a7831" alt="">
      </div>
     <div class="bigBody">
          <h3 class="words jia_title">{{ list.name }}</h3>
            <p class="words jia_zs"><img src="~@/assets/gs.svg"><span>驾校工商认证</span>&nbsp;&nbsp;&nbsp;<img src="~@/assets/yy.svg"><span>驾校运营认证</span></p>
            <div class="bz words">
                <span v-for="(item, index) in list.merit" :key="index">{{item}}</span>
            </div>
        <van-cell :title="list.garde +'分'" is-link :value="list.price +'条评论'" />
        <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
            {{list.name}}简介
        </van-notice-bar>
        <span class="drijs">
        {{list.details}}
        </span>
        <!-- <van-collapse-item :title="list.name + '简介'" name="1">{{list.details}}</van-collapse-item> -->

        <van-goods-action>
        <van-goods-action-icon icon="label-o" :text="sbsSc ? '已收藏' : '收藏'" @click="DriSc" />
        <van-goods-action-icon icon="share-o" text="转发" />
        <van-goods-action-icon icon="like-o" text="喜欢" />
        <van-goods-action-button
            type="info"
            text="联系我"
        />
        </van-goods-action>
      </div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import { homeInfo, DriSc, DriScList, QxDriSc } from '@/api/home.js'
export default {
  data () {
    return {
      id: null,
      list: {},
      userId: null,
      DriScList: [],
      sbsSc: null
    }
  },
  created () {
    this.id = this.$route.params.id
    this.userId = this.$store.state.user.userDetailInfo.id
    this.getHomeInfo()
    this.DriScListFn()
  },
  mounted () {

  },
  updated () {
    this.getHomeInfo()
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async getHomeInfo () {
      const res = await homeInfo()
      //   console.log(res)
      const thelist = res.data
      const result = thelist.find(v => v.id === parseInt(this.id))
      this.list = result
    },
    async DriSc () {
      console.log(this.userId, this.id)
      if (this.sbsSc) {
        Dialog.confirm({
          title: '取消收藏',
          message: '确定要取消收藏吗？'
        }).then(() => {
          this.quxiao()
          this.sbsSc = false
          this.getHomeInfo()
        //   this.DriScListFn()
        //   console.log(11)
        }).catch((err) => {
          // on cancel
          console.log(err)
        })
      } else {
        console.log(11)
        await DriSc({
          userId: this.userId,
          recommentId: parseInt(this.id)
        })
        this.$toast.success('收藏驾校成功')
        this.DriScListFn()
      }
    //   this.getHomeInfo()
    //   this.DriScListFn()
    },
    async DriScListFn () {
      const userId = this.userId
      console.log(this.userId)
      const res = await DriScList(userId)
      console.log(res)
      const ScList = res.data.data
      console.log(ScList)
      this.sbsSc = ScList.some(v => v.id === parseInt(this.id))
    },
    async quxiao () {
      console.log(this.userId, parseInt(this.id))
      const userId = this.userId
      const recommentId = parseInt(this.id)
      const data = { userId, recommentId }
      await QxDriSc(data)
    }
  }
}
</script>

<style lang="less" scoped>
.detail{
    position: absolute;
    padding-bottom: 100px;
    .back{
        position: relative;
        top: 10px;
        left: 10px;
        width: 30px;
        z-index: 1;
    }
    .bigHead{
        // background-color: pink;
        position: relative;
        top: -57px;
        width: 100%;
        height: 500px;
        img{
            width: 100%;
            height: 500px;
        }
    }
    .bigBody{
        padding: 20px;
    img{
        width: 22px;
    }
    .van-cell{
        text-align: left;
        // margin-top: 20px;
    }
    .jia_title{
        font-size: 48px !important;
        padding: 0px;
        margin: 0px;
        margin-left: 25px;

    }
    .jia_zs{
        margin-left: 25px;
    }
    .drijs{
        font-size: 18px;
        display: block;
        width: 600px;
        margin: 0 auto;
        padding-top: 30px;
        line-height: 50px;

    }
    .words{
        font-size: 14px;
        text-align: left;
    }
    .bz {
        margin-top: 30px;
        span {
            // display: inline-block;
            border: 1px solid #ccc;
            margin-left: 24px;
            font-size: 14px;
        }
    }
  }
}

</style>
